<!DOCTYPE html>

<html>
<head>
  <title>autoload.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="analyze.html">
                analyze.coffee
              </a>
            
              
              <a class="source" href="autoload.html">
                autoload.coffee
              </a>
            
              
              <a class="source" href="blender.html">
                blender.coffee
              </a>
            
              
              <a class="source" href="calculate.html">
                calculate.coffee
              </a>
            
              
              <a class="source" href="caman.html">
                caman.coffee
              </a>
            
              
              <a class="source" href="convert.html">
                convert.coffee
              </a>
            
              
              <a class="source" href="event.html">
                event.coffee
              </a>
            
              
              <a class="source" href="filter.html">
                filter.coffee
              </a>
            
              
              <a class="source" href="io.html">
                io.coffee
              </a>
            
              
              <a class="source" href="layer.html">
                layer.coffee
              </a>
            
              
              <a class="source" href="logger.html">
                logger.coffee
              </a>
            
              
              <a class="source" href="module.html">
                module.coffee
              </a>
            
              
              <a class="source" href="pixel.html">
                pixel.coffee
              </a>
            
              
              <a class="source" href="plugin.html">
                plugin.coffee
              </a>
            
              
              <a class="source" href="renderer.html">
                renderer.coffee
              </a>
            
              
              <a class="source" href="store.html">
                store.coffee
              </a>
            
              
              <a class="source" href="util.html">
                util.coffee
              </a>
            
              
              <a class="source" href="blenders.html">
                blenders.coffee
              </a>
            
              
              <a class="source" href="filters.html">
                filters.coffee
              </a>
            
              
              <a class="source" href="size.html">
                size.coffee
              </a>
            
              
              <a class="source" href="blur.html">
                blur.coffee
              </a>
            
              
              <a class="source" href="camera.html">
                camera.coffee
              </a>
            
              
              <a class="source" href="compoundBlur.html">
                compoundBlur.coffee
              </a>
            
              
              <a class="source" href="edges.html">
                edges.coffee
              </a>
            
              
              <a class="source" href="posterize.html">
                posterize.coffee
              </a>
            
              
              <a class="source" href="presets.html">
                presets.coffee
              </a>
            
              
              <a class="source" href="rotate.html">
                rotate.coffee
              </a>
            
              
              <a class="source" href="stackBlur.html">
                stackBlur.coffee
              </a>
            
              
              <a class="source" href="threshold.html">
                threshold.coffee
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>autoload.coffee</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <p>Inform CamanJS that the DOM has been updated, and that it
should re-scan for CamanJS instances in the document.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>Caman.<span class="function"><span class="title">DOMUpdated</span></span> = -&gt;
  imgs = document.querySelectorAll(<span class="string">"img[data-caman]"</span>)
  <span class="keyword">return</span> <span class="keyword">unless</span> imgs.length &gt; <span class="number">0</span>

  <span class="keyword">for</span> img <span class="keyword">in</span> imgs
    parser = <span class="keyword">new</span> CamanParser img, -&gt;
      <span class="property">@parse</span>()
      <span class="property">@execute</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>If enabled, we check the page to see if there are any
images with Caman instructions provided using HTML5
data attributes.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="keyword">if</span> Caman.autoload <span class="keyword">then</span> <span class="keyword">do</span> -&gt;
  <span class="keyword">if</span> document.readyState <span class="keyword">is</span> <span class="string">"complete"</span>
    Caman.DOMUpdated()
  <span class="keyword">else</span>
    document.addEventListener <span class="string">"DOMContentLoaded"</span>, Caman.DOMUpdated, <span class="literal">false</span></pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Parses Caman instructions embedded in the HTML data-caman attribute.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">CamanParser</span></span></pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Regex used for parsing options out of the data-caman attribute.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  INST_REGEX = <span class="string">"(\\w+)\\((.*?)\\)"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Creates a new parser instance.</p>
<p>@param [DOMObject] ele DOM object to be instantiated with CamanJS
@param [Function] ready Callback function to pass to CamanJS</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  constructor: (ele, ready) -&gt;
    <span class="property">@dataStr</span> = ele.getAttribute(<span class="string">'data-caman'</span>)
    <span class="property">@caman</span> = Caman ele, ready.bind(@)</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Parse the DOM object and call the parsed filter functions on the Caman object.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  parse: -&gt;
    <span class="property">@ele</span> = <span class="property">@caman</span>.canvas</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>First we find each instruction as a whole using a global
regex search.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    r = <span class="keyword">new</span> RegExp(INST_REGEX, <span class="string">'g'</span>)
    unparsedInstructions = <span class="property">@dataStr</span>.match r
    <span class="keyword">return</span> <span class="keyword">unless</span> unparsedInstructions.length &gt; <span class="number">0</span></pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>Once we gather all the instructions, we go through each one
and parse out the filter name + it&#39;s parameters.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    r = <span class="keyword">new</span> RegExp(INST_REGEX)
    <span class="keyword">for</span> inst <span class="keyword">in</span> unparsedInstructions
      [m, filter, args] = inst.match(r)</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>Create a factory function so we can catch any errors that
are produced when running the filters. This also makes it very
simple to support multiple/complex filter arguments.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      instFunc = <span class="keyword">new</span> Function(<span class="string">"return function() {
        this.<span class="subst">#{filter}</span>(<span class="subst">#{args}</span>);
      };"</span>)

      <span class="keyword">try</span>
        func = instFunc()
        func.call <span class="property">@caman</span>
      <span class="keyword">catch</span> e
        Log.debug e</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>Execute {Caman#render} on this Caman instance.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  execute: -&gt;
    ele = <span class="property">@ele</span>
    <span class="property">@caman</span>.render -&gt;
      ele.parentNode.replaceChild <span class="property">@toImage</span>(), ele</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
